<template>
  <div class="recommend">
    <better-scroll class="recommend-scroll">
      <div>
        <div class="slider">
          <div class="slider-wrapper">
            <swiper v-if="isKeep" ref="mySwiper" :options="swiperOptions">
              <swiper-slide v-for="item of swiperImg" :key="item.content_id">
                <img :src="item.cover" />
              </swiper-slide>
              <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
          </div>
        </div>
        <better-scroll
          class="recommend-list"
          :scroll-value="scrollValue"
          :scrollx="true"
          :data="currentIndex"
        >
          <song-list @changeScroll="changeScroll" />
          <ul>
            <li v-for="item in recommendMusic" :key="item.content_id" class="recommend-item">
              <div class="imgTitle">
                <img v-lazy="item.cover" width="60" height="60" />
              </div>
              <div class="text">
                <h2 class="name">{{ item.title }}</h2>
                <div class="title">{{ item.username }}</div>
              </div>
            </li>
          </ul>
        </better-scroll>
      </div>
      <div class="loading-container" v-show="!recommendMusic.length">
        <load-music />
      </div>
    </better-scroll>
  </div>
</template>

<script lang="ts">
import betterScroll from '@/components/musicScroll/index.vue'
import { Component, Vue } from 'vue-property-decorator'
import { getBanner } from '@/api/recommend.ts'
import songList from './components/songList.vue'
import loadMusic from '@/components/musicLoading/index.vue'
interface Banner {
  id: string;
  cover: string;
  title: string;
  scheme: string;
}
interface Recommend {
  content_id: number;
  cover: string;
  id: string;
  rcmdtemplate: string;
  title: string;
  listen_num: string;
  username: string;
  type: string;
}
interface PlayList {
  tid: number;
  cover_url_medium: string;
  dirid: string;
  album_pic_mid: string;
  title: string;
  access_num: string;
  creator_info: Create;
}
interface Create {
  nick: string;
}
@Component({
  components: {
    betterScroll: betterScroll,
    songList: songList,
    loadMusic: loadMusic
  }
})
export default class extends Vue {
  // 轮播图
  private swiperImg: Banner[] = []
  // 推荐歌单
  private recommendMusic: any[] = [] // eslint-disable-line
  // keep-alive 切换轮播问题
  private isKeep = false
  // 滚动距离
  private scrollValue = 0
  // 防止重复刷新
  private currentIndex = 0
  // 轮播实例
  private swiperOptions = {
    pagination: {
      el: '.swiper-pagination',
      dynamicBullets: true
    },
    loop: true,
    autoplay: {
      disableOnInteraction: false
    }
  }
  mounted() {
    this.getBannerList()
  }
  activated() {
    this.isKeep = true
  }
  deactivated() {
    this.isKeep = false
  }
  // 请求banner和第一个歌单
  getBannerList() {
    // 所有数据
    getBanner(0)
      .then((res) => {
        const bannerImg =
          res.focus.code === 0 ? res.focus.data.shelf.v_niche[0].v_card : []
        const recommend =
          res.recomPlaylist.code === 0 ? res.recomPlaylist.data.v_hot : []
        if (bannerImg.length > 0) {
          bannerImg.forEach((item: Banner) => {
            const bannerItem = {
              id: item.id,
              title: item.title,
              cover: item.cover,
              scheme: item.scheme
            }
            this.swiperImg.push(bannerItem)
          })
          recommend.forEach((item: Recommend) => {
            const recommendItem = {
              content_id: item.content_id, // eslint-disable-line
              cover: item.cover,
              id: item.id,
              rcmdtemplate: item.rcmdtemplate,
              title: item.title,
              listen_num: item.listen_num, // eslint-disable-line
              username: item.username,
              type: item.type
            }
            this.recommendMusic.push(recommendItem)
          })
        } else {
          console.log('请求失败')
        }
      })
      .catch((err) => {
        console.log(err)
      })
  }
  changeScroll(index: number) {
    // 节流一下，鸡贼
    if (index !== this.currentIndex) {
      this.scrollValue = index
      this.getSongList(index + 1)
      this.currentIndex = index
    }
  }
  getSongList(index: number) {
    this.recommendMusic = []
    getBanner(index)
      .then((res) => {
        let recommend
        if (index === 1) {
          recommend =
            res.recomPlaylist.code === 0 ? res.recomPlaylist.data.v_hot : []
          recommend.forEach((item: Recommend) => {
            const recommendItem = {
              content_id: item.content_id, // eslint-disable-line
              cover: item.cover,
              id: item.id,
              rcmdtemplate: item.rcmdtemplate,
              title: item.title,
              listen_num: item.listen_num, // eslint-disable-line
              username: item.username,
              type: item.type
            }
            this.recommendMusic.push(recommendItem)
          })
        } else {
          recommend =
            res.playlist.code === 0 ? res.playlist.data.v_playlist : []
          recommend.forEach((item: PlayList) => {
            const recommendItem = {
              content_id: item.tid, // eslint-disable-line
              cover: item.cover_url_medium, // eslint-disable-line
              id: item.dirid,
              rcmdtemplate: item.album_pic_mid, // eslint-disable-line
              title: item.title,
              listen_num: item.access_num, // eslint-disable-line
              username: item.creator_info.nick // eslint-disable-line
            }
            this.recommendMusic.push(recommendItem)
          })
        }
      })
      .catch((err) => {
        console.log(err)
      })
  }
}
</script>

<style lang="stylus" scoped>
.loading-container
  position: absolute
  width: 100%
  top: 50%
  transform: translateY(-50%)
.recommend {
  position: fixed;
  width: 100%;
  top: 88px;
  bottom: 0;

  .recommend-scroll {
    height: 100%;
    overflow: hidden;
  }
}

.slider {
  width: 100%;
  position: relative;
  height: 0;
  padding-top: 40%;
  overflow: hidden;

  .slider-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.recommend-list {
  width: 100%;
  overflow: hidden;

  ul {
    padding: 0;
    margin: 0;
  }

  .recommend-item {
    display: flex;
    box-sizing: border-box;
    padding: 0 20px 20px 20px;
    align-items: center;

    .imgTitle {
      width: 60px;
      padding-right: 20px;
      flex: 0 0 60px;

      img {
        border-radius: 50%;
      }
    }

    .text {
      justify-content: center;
      display: flex;
      flex-direction: column;
      flex: 1;
      line-height: 20px;
      overflow: hidden;
      font-size: 14px;

      h2 {
        padding: 0;
        font-weight: 400;
        margin: 0;
        font-size: 100%;
        margin-bottom: 10px;
        color: #fff;
      }

      .title {
        color: hsla(0, 0%, 100%, 0.3);
      }
    }
  }
}
</style>
